30 - Les formulaires

Créer un formulaire

Pour créer un formulaire, on a besoin au minimum de la balise <form>, de champs ainsi que d'un bouton de validation <input type="submit"> :

            

                <form action="cible.php" method="GET">

                    <div>
                        <label for="firstname">Prénom :</label>
                        <input id="firstname" type="text" name="firstname">
                    </div>

                    <div>
                        <input type="submit">
                    </div>

                </form>

            
        

L'attribut action sur la balise <form> sert à indiquer quelle page recevra les données du formulaire.

L'attribut method sur la balise <form> sert à indiquer par quel moyen les données du formulaire seront transmises à la page cible. (GET ou POST)

Tous les champs d'un formulaire doivent être dans la balise form pour être pris en compte par ce dernier au moment de l'envoi.

Tous les champs doivent avoir un attribut name="" pour envoyer correctement des données à la page cible.

Les champs doivent avoir une balise <label> qui servira sémantiquement à expliquer ce que demande un champ de formulaire. La liaison sémantique se fait via l'attribut for du label qui doit contenir le même nom de l'id du champ.

            
<label for="firstname">Prénom :</label>
<input id="firstname" type="text" name="firstname">
            
        

L'id et le name ne sont pas obligés d'être identiques, même si c'est souvent le cas par commodité.

Pour savoir si la liaison sémantique est fonctionnelle, il suffit de cliquer avec la souris sur le label, et si le focus clavier est bien dépacé dans le champ c'est que c'est bon.

(testez de cliquer sur le label "Prénom") : Prénom :

Champs de texte

Le champ de texte est le type de champ le plus classique. Il s'agit de la balise autofermante <input>

Il possède plusieurs paramétrages possibles :

            

                <div>
                    <!-- Le label sert à rattacher un texte pour servir d'étiquette au champ. La liaison sémantique se fait via l'attribut for qui contient l'id du champ relié -->
                    <label for="firstname">Veuillez rentrer votre prénom :</label>
                    <!-- le placeholder permet de mettre un exemple au fond du champ. required = force à remplir le champ avant de pouvoir envoyer le formulaire -->
                    <input id="firstname" type="text" name="firstname" placeholder="Ex : Alice" required>
                </div>

            
        

Résultat de ce code :

Veuillez rentrer votre prénom :

Le champ <input> peut avoir ces valeurs pour l'attribut type (liste non exhaustive) :

• text : du texte libre sur une ligne
• password : du texte masqué pour taper un mot de passe par exemple
• email : champ de texte dont la valeur doit être une adresse email
• date : un bouton permettant de choisir une date
• file : un bouton permettant de choisir un fichier sur l'ordinateur
• number : champ de texte dont la valeur doit être un nombre
• search : du texte libre (pour les champs de recherche)
• tel : du texte libre (pour écrire un numéro de tel)
• url : du texte libre (pour écrire une adresse URL)
• color : un bouton permettant de choisir une couleur

Liste complète : https://developer.mozilla.org/fr/docs/Web/HTML/Element/Input#les_diff%C3%A9rents_types_de_champs_%3Cinput%3E

Texterea

Le textarea est un champ de texte multi-ligne. Contrairement à l'élément <input>, il s'agit d'une balise double :

            

                <div>
                    <label for="message">Votre message :</label>
                    <!-- rows = hauteur en nombre de lignes de texte, cols = largeur en nombre de caractères -->
                    <textarea name="message" id="message" cols="30" rows="10"></textarea>
                </div>

            
        

Résultat de ce code :

Boutons radios

Les boutons radios permettent de sélectionner une valeur ou une autre :

            

                <div>
                    <!-- les deux champs doivent avoir le même name="" pour fonctionner ensemble -->
                    <input id="day" type="radio" name="current-time" value="day"><label for="day">Il fait jour</label>
                    <input id="night" type="radio" name="current-time" value="night"><label for="night">Il fait nuit</label>
                </div>

            
        

Résultat de ce code :

Case à cocher (checkbox)

            

                <div>
                    <input type="checkbox" name="accept" id="accept"><label for="accept">Vous acceptez nos CGU</label>
                </div>

            
        

Résultat de ce code :

Liste déroulante

La liste déroulante permet de choisir un élément parmis une liste d'options :

            

                <div>
                    <label for="color">Quelle est votre couleur préférée ?</label>
                    <select name="color" id="color">
                        <option value="rouge">Rouge</option>
                        <option value="vert">Vert</option>
                        <option value="bleu">Bleu</option>
                        <option value="violet">Violet</option>
                        <option value="aucune">Je n'ai pas de couleur préférée</option>
                    </select>
                </div>

            
        

Résultat de ce code :